<template>
    <div class="test">
        <div class="audit">
            <el-steps class="steps" :active="active" finish-status="success">
                <el-step title="申请开店"></el-step>
                <el-step title="开店须知"></el-step>
                <el-step title="店铺信息"></el-step>
                <el-step title="平台审核"></el-step>
                <el-step title="在线签约"></el-step>
            </el-steps>
            <el-form :rules="rules" ref="dataForm" :model="temp" :key='tableKey' :data="list" class="el_form">
                <div class="items">
                    <div class="shop" style="font-size: 20px;font-weight:bold">店主信息</div>
                    <el-form-item label="店主姓名" prop="shopName">
                        <el-input v-model="temp.shopName" placeholder="请填写您的姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="用户编号" prop="userCode">
                        <el-input v-model="temp.userCode" placeholder="请填写您的编号"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="userPhone">
                        <el-input v-model="temp.userPhone" placeholder="请填写您的联系电话"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证" prop="card">
                        <el-input v-model="temp.card" onkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')" placeholder="请填写您的身份证号码"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" prop="userAddress">
                        <el-input v-model="temp.userAddress" placeholder="请填写您的居住地址"></el-input>
                    </el-form-item>
                    <div class="shop" style="font-size: 20px;font-weight:bold">店铺信息</div>
                    <el-form-item class="avatar" label="店铺头像" prop="avatar">
                        <div style="color: white">&nbsp;</div>
                        <el-upload
                                ref="avatarUpload"
                                action="http://upload.qiniup.com"
                                :auto-upload="true"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :before-upload="handleUpload"
                                :on-success="handleavatarUploadSuccess"
                                :data="qData"
                                :file-list="avatarList"
                                :on-remove="handleavatarRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="店铺名称" prop="name">
                        <el-input v-model="temp.name" placeholder="请填写店铺名称"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺标语" prop="slogan">
                        <el-input v-model="temp.slogan" placeholder="请填写店铺标语"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺联系方式" prop="shopPhone">
                        <el-input v-model="temp.shopPhone" placeholder="请填写店铺联系方式"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺地址" prop="shopAddress">
                        <el-input v-model="temp.shopAddress" placeholder="请填写店铺地址"></el-input>
                    </el-form-item>
                </div>
                <div class="items">
                    <div class="shop" style="font-size: 20px;font-weight:bold">店铺服务人</div>
                    <el-form-item label="服务人姓名" prop="manageName">
                        <el-input v-model="temp.manageName" placeholder="请填写店铺服务人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="服务人编号" prop="mcode">
                        <el-input v-model="temp.mcode" placeholder="请填写店铺服务人编号"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="password">
                        <el-input v-model="temp.managePhone" placeholder="请填写店铺服务人的联系电话"></el-input>
                    </el-form-item>
                    <div class="shop" style="font-size: 20px;font-weight:bold">用户名密码(请务必牢记)</div>
                    <el-form-item label="用户名(用来登陆后台管理订单、产品等)" prop="username">
                        <el-input v-model="sysUser.username" onkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')" placeholder="请填写用户名(2-16位字母和数字组成)"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="sysUser.password" onkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')" placeholder="请填写密码(5-16位字母和数字组成)"></el-input>
                    </el-form-item>
                    <div class="shop" style="font-size: 20px;font-weight:bold">店铺资质</div>
                    <el-form-item class="userCard" label="店主身份证正反面照" prop="cardImg">
                        <div style="color: white">&nbsp;</div>
                        <el-upload
                                ref="cardUpload"
                                action="http://upload.qiniup.com"
                                :auto-upload="true"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :before-upload="handleUpload"
                                :on-success="handlecardUploadSuccess"
                                :data="qData"
                                :file-list="cardList"
                                :on-remove="handlecardRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item class="shopBusImg" label="店铺营业执照图" prop="shopbusImg">
                        <div style="color: white">&nbsp;</div>
                        <el-upload
                                ref="shopbusImgUpload"
                                action="http://upload.qiniup.com"
                                :auto-upload="true"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :before-upload="handleUpload"
                                :on-success="handleshopbusImgUploadSuccess"
                                :data="qData"
                                :file-list="shopbusImgList"
                                :on-remove="handleshopbusImgRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                    <el-button class="btn" type="success" round @click="createData">提交申请</el-button>
                </div>
            </el-form>
                <!-- <el-button @click="closeDialogForm">取消</el-button>-->

                <!-- <el-button v-else type="primary" @click="updateData">确认</el-button>-->
        </div>
        <div class="img"><img src="./img/delAudit.jpg" @click="dialogVisible = true" style="width: 80px;float:right"></div>
        <el-dialog
                title="正在操作撤销店铺入驻申请"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <span>用户编号:<input style="height: 20px" v-model ="userCode" ></span><br>
            <span>身份证号:<input style="height: 20px;margin-top: 10px" v-model ="userCard" ></span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="delShop()">确 定</el-button>
              </span>
        </el-dialog>
    </div>

</template>
<style>
    .audit {
        width: 800px;
        margin: 0 auto;
    }
    .shop{
        margin-top: 30px;
        margin-bottom: 10px;
    }
    .steps{
        margin-top: 30px;
    }
   .btn{
        margin-bottom: 10px;
    }
    .el_form{
        display: flex;
        justify-content: space-between;
    }
    .img{
        position: fixed;
        top: 390px;
        right: 0;
    }

</style>
<script scoped>
    import {saveShop,delShop} from '@/api/shop'
    import {getToken, domain} from '@/api/qiniu'
    import {listToStrs, strsToList} from '@/utils/imgUtil'
    export default {
        data() {
            return {
                userCard:null,
                userCode:null,
                avatarList: [],
                cardList: [],
                active:2,
                shopbusImgList: [],
                shopTypes:[],
                dialogImageUrl: '',
                dialogVisible: false,
                tableKey: 0,
                list: null,
                sysUser:{
                    username:null,
                    password:null
                }
                ,
                temp: {
                    userAddress:null,
                    cardImg:null,
                    userName: null,
                    userCard: null,
                    brandName: null,
                    brandInfo: null,
                    shopName:null,
                    shopPhone:null,
                    userPhone:null,
                    managePhone:null,
                    slogan:null,
                    name:null,
                    manageName:null,
                    remark:null,
                    userCode:null,
                    mcode:null,
                    avatar:null,
                    card:null,
                    shopbusImg:null,
                    shopAddress:null
                },
                /*goodsTemp: {
                    id: null,
                    shopId: null,
                    businessLicense: null,
                    brandbusinessLicense: null,
                    companyhealthLicense: null,
                    managehealthLicense: null,
                    approveLicense: null,
                    produceLicense: null,
                    registerNotice: null,
                    manageLicense: null,
                    gmpLicense: null,
                    trademarkLicense: null,
                    productAgreement: null,
                    circulateLicense: null,
                    betweencirculateLicense: null,
                    detectPhotocopy: null,
                    goodsDeclaration: null,
                    productList: null,
                    companyLicense: null,
                    entrustAgreement: null,
                    qualityGuaranty: null,
                    healthPhotocopy: null,
                    fiveTrademark: null,
                    recordTable: null,
                    epidemicPrevention: null,
                    industryLicense: null,
                    salesAuthorization: null,
                    testProve: null,
                    cccLicense: null,
                    goodsProve: null,
                    brandAuthorization: null
                },*/
                rules: {
                    name: [
                        {
                            required: true,
                            message:'必填字段',
                            trigger:'change'
                        }],
                    manageName: [
                        {
                            required: true,
                            message:'必填字段',
                            trigger:'change'
                        }],
                    shopPhone: [
                        {
                            required: true,
                            message:'必填字段',
                            trigger:'change'
                        }],
                    shopAddress: [
                        {
                            required: true,
                            message:'必填字段',
                            trigger:'change'
                        }],
                    slogan: [
                        {
                            required: false,
                            message:'必填字段',
                            trigger:'change'
                        }],
                    userAddress: [
                        {
                            required: true,
                            message:'必填字段',
                            trigger:'change'
                        }],
                    card: [
                        {
                            required: true,
                            message:'必填字段',
                            trigger:'change'
                        }],
                    userPhone: [
                        {
                            required: true,
                            message:'必填字段',
                            trigger:'change'
                        }],
                    mcode: [
                        {
                            required: true,
                            message:'必填字段',
                            trigger:'change'
                        }],
                    shopName: [
                        {
                            required: true,
                            message:'必填字段',
                            trigger:'change'
                        }],
                    userCode: [
                        {
                            required: true,
                            message:'必填字段',
                            trigger:'change'
                        }],
                    remark: [
                        {
                            required: false,
                            message:'必填字段',
                            trigger:'change'
                        }]
                },
                qData :{
                    token: '',
                    key:''
                },
             }
        },
        created() {
            this.initQiniu()

            if (this.$route.params.temp){
                this.temp = this.$route.params.temp;
                this.initImgUrl()
            }
        },
        methods: {
            delShop(){
                this.$confirm('是否确认撤销店铺入驻申请？')
                    .then(_ => {
                        if (this.userCode == null || this.userCode == ''){
                            this.$message.error("请输入用户编号");
                            return
                        }
                        if (this.userCard == null || this.userCard == ''){
                            this.$message.error("请输入用户身份证号码");
                            return
                        }
                        delShop(this.userCode,this.userCard).then(res =>{
                            if (res.code == 10000){
                                this.$message.success("撤销入驻申请成功")
                                this.dialogVisible = false;
                            }else {
                                this.$message.error("撤销入驻申请失败")
                            }
                        })
                    })
                    .catch(_ => {});

            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            createData() {
                this.$refs['dataForm'].validate((valid) => {
                    this.beforeFormCommit()
                    if (valid){
                        //手机号正则
                       // var mPattern = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
                        //身份证号（18位）正则
                        var cp = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                        if(this.temp.userPhone.length < 11){
                            this.$message.error('请填写正确的手机号');
                            return;
                        }
                        if (!cp.test(this.temp.card)){
                            this.$message.error('请填写正确的身份证号码');
                            return;
                        }
                        if (this.sysUser.username == null || this.sysUser.username == ''){
                            this.$message.error('请填写正确的用户名');
                            return;
                        }
                        if (this.sysUser.password == null || this.sysUser.password == '' || this.sysUser.password.length < 5){
                            this.$message.error('请填写正确的密码');
                            return;
                        }
                        if (this.temp.cardImg == null || this.temp.cardImg == ""){
                            this.$message.error('请上传店主身份证正反面照');
                            return;
                        }
                        if (this.temp.avatar == null || this.temp.avatar == ""){
                            this.$message.error('请上传店铺头像');
                            return;
                        }
                        if (this.temp.shopbusImg == null || this.temp.shopbusImg == ""){
                            this.$message.error('请上传店铺营业执照');
                            return;
                        }
                        this.$confirm('是否提交入驻申请, 是否继续?', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            saveShop(this.temp,this.shopTypes,this.sysUser).then(res => {
                                this.temp = res.data
                                if (res.code == 10000) {
                                    this.$message({
                                        type: 'success',
                                        message: '提交申请成功!'
                                    });
                                    this.$router.push('/adminAudit')
                                }else {
                                    this.$message.error("提交申请失败")
                                }
                            })
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消提交'
                            });
                        });
                    }

                })
            },

            beforeFormCommit(){
                this.initImgName()// 图片转换
            },
            // 显示将图片名封装成可以展示状态集合
            initImgUrl() {
                this.avatarList = strsToList(this.temp.avatar, domain)
                this.cardList = strsToList(this.temp.cardImg, domain)
                this.shopbusImgList = strsToList(this.temp.shopbusImg, domain)
            },
            // 关闭显示窗口 重置图片地址 防止错乱
            resetImgUrl() {
                this.avatarList = []
                this.cardList = []
                this.shopbusImgList = []
            },
            // 上传或者更新的时候从图片链接中获取图片名字
            initImgName() {
                this.temp.avatar = listToStrs(this.avatarList)
                this.temp.cardImg = listToStrs(this.cardList)
                this.temp.shopbusImg = listToStrs(this.shopbusImgList)
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => {
                        return v[j]
                    }
                ))
            },
            // 存在图片
            handleUpload(file) {
                this.qData.key = new Date().valueOf() + file.name
            },
            initQiniu() {
                // 获取七牛配置
                getToken().then(res => {
                    this.qData.token = res.data
                }).
                catch(error => {
                    console.log(error)
                })
            },
            handleavatarUploadSuccess(response, file, fileList) {
                this.avatarList.push({name: file.response.key, url: domain + file.response.key})
            }
            ,
            handlecardUploadSuccess(response, file, fileList) {
                this.cardList.push({name: file.response.key, url: domain + file.response.key})
            }
            ,
            handleshopbusImgUploadSuccess(response, file, fileList) {
                this.shopbusImgList.push({name: file.response.key, url: domain + file.response.key})
            }
            ,
            handlecompanybusImgUploadSuccess(response, file, fileList) {
                this.companybusImgList.push({name: file.response.key, url: domain + file.response.key})
            }
            ,
            handleavatarRemove (file, fileList) {
                for (var fn of this.avatarList) {
                    if (fn.name === file.name) {
                        this.avatarList.splice(this.avatarList.indexOf(fn), 1)
                    }
                }
            },
            handlecardRemove (file, fileList) {
                for (var fn of this.cardList) {
                    if (fn.name === file.name) {
                        this.cardList.splice(this.cardList.indexOf(fn), 1)
                    }
                }
            },
            handleshopbusImgRemove (file, fileList) {
                for (var fn of this.shopbusImgList) {
                    if (fn.name === file.name) {
                        this.shopbusImgList.splice(this.shopbusImgList.indexOf(fn), 1)
                    }
                }
            },
            handlecompanybusImgRemove (file, fileList) {
                for (var fn of this.companybusImgList) {
                    if (fn.name === file.name) {
                        this.companybusImgList.splice(this.companybusImgList.indexOf(fn), 1)
                    }
                }
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url
                this.dialogVisible = true
            }
        },
    }
</script>
